Dialog 对话框

封装 useDialog Hook，使用该函数可以方便的调用对话框。

import { useDialog } from 'qin-lantern'

当页面尺寸小于 md 时，会自动全屏对话框。

<template>
  <el-button @click="open('打开时传递的数据')">
    弹框展示
  </el-button>

  <ql-dialog
    v-model="show"
    title="提示"
    :confirm="confirm"
  >
    我是内容
  </ql-dialog>
</template>
<script setup lang="ts">
import { useDialog } from 'qin-lantern'

// 模拟接口延时
import { delayed } from '@/utils'
const timedelay = delayed()

// 弹框Hook
const [show, AOP] = useDialog()
// 打开弹框
const open = AOP((data) => {
  console.log(data)
})

// 关闭弹框
const confirm = AOP(async () => {
  const data = await timedelay('我是弹框确认返回的数据')
  console.log(data)
})
</script>

<style scoped lang='scss'></style>

API

Attributes

属性名	说明	类型	默认
v-model	弹框展示	boolean	false
footer	是否展示footer	boolean	true
sureText	确认按钮文字	string	确认
cancelText	取消按钮文字	string	取消
confirm	确认按钮事件	Function	() => Promise.resolve()

Other Attributes